<template>
  <el-form ref="form" size="small" label-width="110px" label-position="left">
    <!--      <el-form-item label-width="90px" label="">{{getTypeName(feeMode)}}</el-form-item>-->
    <div class="flex align-center">
      <div class="method-title flex-shrink-0 text-center" style="width:90px">{{getTypeName2(feeMode)}}</div>
      <div class="flex-column">
        <div v-for="(item, index) in form.list" :key="item.uuid" class="flex">
          <template v-if="feeMode === 'pieces'">
            <el-form-item :label="index === 0 ? getTypeName3(feeMode) : getTypeName4(feeMode) + index" label-width="90px">
              <span v-if="index !== form.list.length - 1">{{item.initStart}}{{getTypeName5(feeMode)}}~{{item.initEnd}}{{getTypeName5(feeMode)}}</span>
              <span v-else>{{item.initStart}}{{getTypeName5(feeMode)}}</span>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item :label="index === 0 ? getTypeName3(feeMode) : getTypeName4(feeMode) + index" label-width="90px">
              <span v-if="index !== form.list.length - 1">{{item.floatStart}}{{getTypeName5(feeMode)}}~{{item.floatEnd}}{{getTypeName5(feeMode)}}</span>
              <span v-else>{{item.floatStart}}{{getTypeName5(feeMode)}}</span>
            </el-form-item>
          </template>
          <el-form-item class="ml30" :label="getTypeName6(index)" label-width="70px">
            {{item.price}}元
          </el-form-item>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    feeMode: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      dialogVisible: true,
      form: {
        list: this.data
      },
    };
  },
  watch: {
    data: {
      handler(val) {
        this.form.list = val || []
      },
    },
  },
  methods: {
    getTypeName(type) {
      return {
        mileage: '按里程',
        weight: '按重量',
        volume: '按体积',
        pieces: '按件数',
        volumeWeight: '按体积重量',
      }[type] || ''
    },
    getTypeName2(type) {
      return {
        mileage: '实际里程',
        weight: '实际重量',
        volume: '实际体积',
        pieces: '实际件数',
        volumeWeight: '体积重量',
      }[type] || ''
    },
    getTypeName3(type) {
      return {
        mileage: '首里程',
        weight: '首重',
        volume: '首容量',
        pieces: '首件',
        volumeWeight: '首重',
      }[type] || ''
    },
    getTypeName4(type) {
      return {
        mileage: '续里程',
        weight: '续重',
        volume: '续容量',
        pieces: '续件',
        volumeWeight: '续重',
      }[type] || ''
    },
    getTypeName5(type) {
      return {
        mileage: 'KM',
        weight: '吨',
        volume: '立方',
        pieces: '件',
        volumeWeight: '吨',
      }[type] || ''
    },
    getTypeName6(index) {
      return index === 0 ? '起运价' : '叠加价'
    },
  }
};
</script>
<style lang="scss">
.method-title {
  position: relative;
  top: -10px;
}
</style>
